/**
 * @author Amamatthew
 * @class DragonApp.view.pub.form.ServerList
 * @extends extend: 'Ext.form.Panel',
 *
 *  实际用例:
 *
 *    //区服选择
    var serverSelectForm = Ext.create('DragonApp.view.pub.form.CheckboxGroup',{
      id:'serverSelectForm',
      url: PHP_File_ServerList,
      title: '发放条件',
      grouptitle:'区服列表',
      groupWidth: 1000,
      columns: 4,
      renderTo: Ext.getBody()
      });
 */
Ext.define('DragonApp.view.pub.form.CheckboxGroup', {
    extend: 'Ext.form.Panel',
    alias: 'widget.checkboxgroupform',
    config: {

        /**
         * @private
         * form title initialization
         */
        title: null,

        bodyPadding: 0,

        fieldDefaults: {
            labelWidth: 60,
            labelAlign: "right"
        },

        /**
         * @private
         * checkboxgroup columns initialization
         */
        columns: null,

        /**
         * @private
         * checkboxgroup data src initialization
         */
        url: null,

        /**
         * @private
         * checkboxgroup title initialization
         */
        grouptitle: null,

        /**
         * @private
         * checkboxgroup width initialization
         */
        groupWidth: null,

        /**
         * @private
         * checkboxgroup width initialization
         */
        toolbarPosition: null,

        /**
         * @private
         * selected value initialization
         */
        selectValue: null,

        items: [],

        listeners: {
            'beforerender': function(me, eOpts) {
                me.queryById('checkboxgroup').setWidth(me.groupWidth);

                Ext.Ajax.request({
                    url: this.url,
                    success: function(response, opts) {
                        var arr = Ext.decode(response.responseText).rows;
                        for (var i = 0; i < arr.length; i++) {
                            var newItem = {
                                itemId: 'checkBox_' + i,
                                name: 'checkList',
                                inputValue: arr[i].serverID,
                                boxLabel: arr[i].serverName,
                                submitValue: true
                            };
                            me.queryById('checkboxgroup').add(newItem);
                        }
                    }
                });
            }
        }
    },

    /**
     * @description 构造函数
     */
    constructor: function(config) {

        this.initConfig(config);
        this.items = this.buildItems();

        switch (this.toolbarPosition) {

            case 'top':
                this.tbar = this.buildBar;
                break;

            case 'buttom':
                this.bbar = this.buildBar;
                break;

            default:
                this.buttons = this.buildButtons();
                break;
        }

        this.callParent();
        this.queryById('checkboxgroup').setFieldLabel(this.grouptitle);
    },
    /**
     * @description 选择回调（实例覆盖）
     */
    callbackSelect: function(selectValue) {
        Ext.Msg.alert('Submitted Values', selectValue);
    },
    /**
     * @description 多选组件构造
     */
    buildItems: function() {
        return Ext.create('Ext.form.CheckboxGroup', {
            itemId: 'checkboxgroup',
            columns: this.columns,
            padding: '10 0 10 0',
            vertical: false,
            defaultType: 'checkboxfield',
            items: []
        });
    },

    /**
     * @description 按钮构造
     */
    buildButtons: function() {
        var buttonsArray = [
            this.buildSelectAllButton(this),
            this.buildReverseSelectButton(this),
            this.buildCancleAllButton(this),
            this.buildSaveButton(this)
        ];
        return buttonsArray;
    },

    /**
     * @description 按钮构造
     */
    buildBar: function() {
        var bar = Ext.create('Ext.toolbar.Toolbar', {
            items: this.buildButtons
        });
        return bar;
    },

    /**
     * @description 全选按钮
     */
    buildSelectAllButton: function(me) {
        return Ext.create('Ext.Button', {
            text: '全选',
            itemId: 'selectAll_btn',
            handler: function() {
                var items = me.queryById('checkboxgroup').items;
                for (var i = 0; i < items.length; i++) {
                    items.get(i).setValue(true);
                }
            }
        });
    },

    /**
     * @description 反选按钮
     */
    buildReverseSelectButton: function(me) {
        return Ext.create('Ext.Button', {
            text: "反选",
            itemId: 'reverseSelect_btn',
            handler: function() {
                var items = me.queryById('checkboxgroup').items;
                for (var i = 0; i < items.length; i++) {
                    var item = items.get(i);
                    var itemValue = item.getValue();
                    if (true === itemValue) {
                        item.setValue(false);
                    } else if (false === itemValue) {
                        item.setValue(true);
                    }
                }
            }
        });
    },

    /**
     * @description 取消全选
     */
    buildCancleAllButton: function(me) {
        return Ext.create('Ext.Button', {
            text: "取消所选",
            itemId: 'cancleAll_btn',
            handler: function() {
                var items = me.queryById('checkboxgroup').items;
                for (var i = 0; i < items.length; i++) {
                    items.get(i).setValue(false);
                }
            }
        });
    },
    /**
     * @description 保存
     */
    buildSaveButton: function(me) {
        return Ext.create('Ext.Button', {
            text: "保存",
            itemId: 'saveAll_btn',
            handler: function() {

                this.selectValue = me.getValue();

                //self-defined callback
                this.callbackSelect(this.selectValue);
            }
        });
    },
    /**
     * @description sid取值函数
     */
    getValue: function() {
        var items = this.queryById('checkboxgroup').items;
        var valueArr = [];
        for (var i = 0; i < items.length; i++) {
            var item = items.get(i);
            if (item.checked) {
                valueArr.push(item.inputValue);
            }
        }
        return valueArr.join();
    },
    /**
     * @description 取名称及值函数(sid:名称)
     */
    getFullValue: function() {
        var items = this.queryById('checkboxgroup').items;
        var valueArr = [];
        for (var i = 0; i < items.length; i++) {
            var item = items.get(i);
            if (item.checked) {
                var fullValue = item.inputValue + ':' + item.boxLabel;
                valueArr.push(fullValue);
            }
        }
        return valueArr.join();
    }
});